<template>
	<view class="warehousingToBeCon">
		<!-- nav -->
		<view class="nav">
			<view class="flex_between">
				<view class="nav_title">
					<view :class="{'active':isActive==1}" @click="chenked(1)">
						展台简介
					</view>
				</view>
				<view class="nav_title">
					<view :class="{'active':isActive==2}" @click="chenked(2)">
						展品精选
					</view>
				</view>
				<view class="nav_title">
					<view :class="{'active':isActive==3}" @click="chenked(3)">
						联系信息
					</view>
				</view>
			</view>
		</view>
		<!-- nav-item -->
		<view class="nav_item" v-if="isActive==1">
			<view class="ztjj">
				<image src="./img/n1.jpg" mode=""></image>
			</view>
			<view class="ztjs">
				<text>
					<text class="t1">|</text>
					<text class="t2">展台介绍</text>
					<view class="t3">
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案						文案						文案						文案						文案						文案						文案						文案						文案						文案						文案						文案						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						
					</view>
				</text>
				
			</view>
			<view class="ztjs">
				<text>
					<text class="t1">|</text>
					<text class="t2">展商主营</text>
					<view class="t3">
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案						文案						文案						文案						文案						文案						文案						文案						文案						文案						文案						文案						文案
						文案
						文案
						文案
						文案
						文案
						文案
						文案
						
					</view>
				</text>
				
			</view>
		</view>
		<view class="nav_item" v-if="isActive==2">
			
		<view class="sp1">
			<image src="./img/jd2.jpg" mode=""></image>
			<view class="sp2">
				<text class="p1">山东大樱桃进口车厘子京东新鲜水果礼盒进口车厘子</text>
				<text class="p2">代养官方旗舰店</text>
				<view class="p5">
					<text class="p3">￥180.00</text>
					<text class="p4">收藏</text>
				</view>
			</view>
			
		</view>
		
		<view class="sp1">
			<image src="./img/jd2.jpg" mode=""></image>
			<view class="sp2">
				<text class="p1">山东大樱桃进口车厘子京东新鲜水果礼盒进口车厘子</text>
				<text class="p2">代养官方旗舰店</text>
				<view class="p5">
					<text class="p3">￥180.00</text>
					<text class="p6">已收藏</text>
				</view>
			</view>
			
		</view>
		<view class="sp1">
			<image src="./img/jd2.jpg" mode=""></image>
			<view class="sp2">
				<text class="p1">山东大樱桃进口车厘子京东新鲜水果礼盒进口车厘子</text>
				<text class="p2">代养官方旗舰店</text>
				<view class="p5">
					<text class="p3">￥180.00</text>
					<text class="p4">收藏</text>
				</view>
			</view>
			
		</view>
		<view class="sp1">
			<image src="./img/jd2.jpg" mode=""></image>
			<view class="sp2">
				<text class="p1">山东大樱桃进口车厘子京东新鲜水果礼盒进口车厘子</text>
				<text class="p2">代养官方旗舰店</text>
				<view class="p5">
					<text class="p3">￥180.00</text>
					<text class="p6">已收藏</text>
				</view>
			</view>
			
		</view>
		</view>
		<view class="nav_item" v-if="isActive==3">
			<view class="box1">	
<view class=b-1>
	<text class="a1">联系人</text>
	<text>张三</text>
</view>
<text class="bor"></text>
<view class=b-1>
	<text class="a1">联系电话</text>
	<text>123456789011</text>
</view>
<text class="bor"></text>
<view class=b-1>
	<text class="a1">传真</text>
	<text>-</text>
</view>
<text class="bor"></text>
<view class=b-1>
	<text class="a1">地址</text>
	<text>火葬场</text>
</view>
<text class="bor"></text>
<view class=b-1>
	<text class="a1">邮编</text>
	<text>-</text>
</view>
<text class="bor"></text>
<view class=b-1>
	<text class="a1">邮箱</text>
	<text>412532165421@qq.com</text>
</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isActive: 1
			}
		},
		methods: {
			chenked(type) {
				this.isActive = type
			},
		}
	}
</script>

<style lang="scss" scoped>
	.warehousingToBeCon {
		width: 100%;

		.nav {
			background-color: #fff;

			.flex_between {
				display: flex;

				.nav_title {
					font-weight: 600;
					height: 88rpx;
					line-height: 88rpx;
					width: 100%;
					text-align: center;
					font-size: 32rpx;
					font-family: "PingFang";
				}
			}
		}
	}

	.active {
		position: relative;
		color: #0956f0;
		font-weight: 600;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #0956f0;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;

	}
	.ztjj image{
		width: 100%;
		
		height: 160px;
		margin: 20px 0;
	}
	.ztjs{
		width: 95%;
		margin: 0 auto;
		padding: 15px;
		font-size: 15px;
		background: #fff;
		border-radius: 20px;
		margin-top:20px ;
	}
	.t1{
		font-size: 20px;
		font-weight: 600;
		color: #0956f0;
	}
	.t2{
		font-size: 20px;
		font-weight: 600;
		
	}
	.t3{
		margin-top: 10px;
	}
	.sp1{
		width: 100%;
		height: 140px;
		background: #fff;
		margin: 10px 0;
		display: flex;
		flex-direction: row;
		padding: 10px;
		border-radius: 25px;
		
	}
	.sp1 image{
		height: 130px;
		width: 30%;
	}
	.sp2{
		display:flex;
		flex-direction: column;
		width: 60%;
		margin: 0 auto;
	}
	.p1{
		font-size: 16px;
		font-weight: 600;
		
	}
	.p5{
		display: flex;
	}
	.p5>text{
		display: block;
	}
	.p2{
		font-size: 14px;
		color: #818181;
		margin-bottom:30px;
	}
	.p3{
		color: #f00;
		font-size: 20px;
		margin-right:50px ;
	}
	.p4{
		width: 120px;
		height: 30px;
		border: 1px solid #ccc;
		border-radius: 15px;
		text-align: center;
		line-height: 30px;
	}
	.p6{
		width: 120px;
		height: 30px;
		border-radius: 15px;
		text-align: center;
		line-height: 30px;
		background: #e0eaff;
		color: #1b68fd;
	}
	.box1{
		width: 90%;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		margin-top: 10px;
		
		background: #fff;
	}
	.b-1{
		height: 60px;
		padding: 15px;
		line-height: 30px;
		display: flex;
		justify-content: space-between;
	}
	.bor{
		width: 95%;
		border-bottom: 1px #ccc solid;
		margin-left: 5%;
	}
	.a1{
		color: #ccc;
	}
</style>
